<template>
    <div>
        我的页
        <!-- 渲染商品数据 -->
        <ul>
            <li v-for="item in goodslist" :key="item.id">
                <img :src="item.list_pic_url" alt="">
                <p>{{ item.name }}</p>
                <p>{{ item.retail_price }}</p>
            </li>
        </ul>
        <hr />
        <ul>
            <li v-for="item in filtergoodslist" :key="item.id">
                <img :src="item.list_pic_url" alt="">
                <p>{{ item.name }}</p>
                <p>{{ item.retail_price }}</p>
            </li>
        </ul>
    </div>
</template>

<script>
// 使用辅助函数的方式 操作 子模块shop 中的数据
import { mapState, mapActions, mapGetters } from 'vuex';
export default {
    data() {
        return {

        }
    },
    computed: {
        // ...mapState('模块名', ['要映射的数据',....])
        ...mapState('shop', ['goodslist']),
        ...mapGetters('shop', ['filtergoodslist'])
    },
    methods: {
        ...mapActions('shop', ['initgoodslistAsync'])
    },
    mounted() {
        console.log('this-mine', this);
        this.initgoodslistAsync()
    }
}
</script>
<style scoped>
ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

li {
    width: 50%;
}

li img {
    width: 100%;
}
</style>